<template>
	<view class="goods-box">
		<view class="style_1" :style="{ backgroundColor: box_bg }" v-if="styleType == 1" @click.stop="goodsClick">
			<view :style="{ width: imageStyle.width, height: imageStyle.height }" class="image">
				<image :src="$img_base_url(goodsDetail.image)" mode="aspectFill"></image>
			</view>
			<view class="info">
				<view class="name more-row" :style="{ '--row-num': title_row }">
					{{ goodsDetail.title }}
				</view>
				<view class="center-text">
					<slot name="center"></slot>
				</view>
				<view class="tag-list">
					<slot name="tagList"></slot>
				</view>
				<view style="flex: 1"></view>
				<view class="price_num" :style="{ justifyContent: jc == 1 ? 'space-between' : 'flex-start' }">
					<slot name="priceBox">
						<view class="price"><text>￥</text>{{ goodsDetail.price }}</view>
						<slot name="np">
							<view class="n_price"> ￥{{goodsDetail.sku[0].market_price}} </view>
						</slot>
					</slot>
				</view>
			</view>
		</view>

		<view class="style_2" :style="{ backgroundColor: box_bg }" v-if="styleType == 2" @click.stop="goodsClick">
			<view :style="{ width: imageStyle.width, height: imageStyle.height }" class="image">
				<image :src="$img_base_url(goodsDetail.image)" mode="aspectFill"></image>
				<!-- <view class="tag">
					标签
				</view> -->
			</view>
			<view class="info" :style="{ '--img-width': img_width, paddingLeft: style_2_pl }">
				<view class="name more-row" :style="{ '--row-num': title_row, fontSize: nameFontSize }">
					{{ goodsDetail.title }}
				</view>
				<view class="tag-list">
					<slot name="tagList"></slot>
				</view>
				<view class="center-text">
					<slot name="center"></slot>
				</view>
				<view style="flex: 1"></view>
				<view class="price_num">
					<slot name="priceBox">
						<view class="left" :style="{ justifyContent: jc == 1 ? 'space-between' : 'flex-start' }">
							<view class="price"><text>￥</text>{{ goodsDetail.price || goodsDetail.sku.price }}</view>
							<slot name="np">
								<view class="n_price"> ￥{{goodsDetail.sku[0].market_price}} </view>
							</slot>
						</view>
					</slot>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "goods",
		props: {
			styleType: {
				type: Number,
				default: 1,
			},
			jc: {
				type: String,
				default: "2",
			},
			imageStyle: {
				type: Object,
				default: () => {
					return {
						width: "166rpx",
						height: "166rpx",
					};
				},
			},
			title_row: {
				type: Number,
				default: 1,
			},
			style_2_pl: {
				type: String,
				default: "24rpx",
			},
			nameFontSize: {
				type: String,
				default: "30rpx",
			},
			box_bg: {
				type: String,
				default: "#FFFFFF",
			},
			goodsDetail: {
				type: Object,
				default: () => {
					return {};
				},
			},
			pageUrl: {
				type: String,
				default: "#FFFFFF",
			},
			noClick: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				img_width: "",
				img_base_url: this.img_base_url,
			};
		},
		watch: {
			imageStyle(val) {
				this.Topx();
			},
			goodsDetail: {
				immediate: true,
				deep: true,
				handler(val) {
					console.log(val, 887799)
					this.Topx();
				}
			}
		},
		mounted() {
			this.Topx();
		},
		methods: {
			Topx() {
				if (this.styleType == 1) {
					return;
				}
				let i = this.imageStyle.width.indexOf("rpx");
				let n = this.imageStyle.width.slice(0, i);
				this.img_width = uni.upx2px(n) + "px";
			},

			goodsClick() {
				console.log(this.goodsDetail);
				// console.log('-==555555')
				// https: //localhost:8080/#/pagesMall/goods/detail?id=3
				// this.$emit('goodsClick')
				if (this.noClick) {
					uni.navigateTo({
						url: `/pagesMall/group_buying/detail?id=${this.goodsDetail.id}`,
					})
					return
				}
				uni.navigateTo({
					// url: this.pageUrl,
					url: '/pagesMall/goods/detail?id=' + this.goodsDetail.id,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.goods-box {
		width: 100%;
		height: 100%;

		// margin-bottom: 24rpx;
		.style_1 {
			width: 100%;
			height: 100%;
			background-color: #ffffff;
			border-radius: 20rpx;
			overflow: hidden;
			display: flex;
			flex-direction: column;

			&>.image {
				width: 100%;
				height: 232rpx;

				image {
					width: 100%;
					height: 100%;
					// border-radius: 20rpx;
					border-radius: 10rpx 10rpx 0 0;
				}
			}

			.info {
				flex: 1;
				padding: 16rpx 8rpx 20rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.name {
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
					line-height: 44rpx;
				}

				.center-text {
					font-weight: bold;
					font-size: 24rpx;
					color: #999999;
					line-height: 34rpx;
					margin-top: 6rpx;
				}

				.price_num {
					display: flex;
					flex-wrap: wrap;
					align-items: flex-end;
					justify-content: space-between;

					.price {
						font-weight: bold;
						font-size: 44rpx;
						color: #ff2e2e;

						// line-height: 40rpx;
						text {
							font-size: 32rpx;
						}
					}

					.num {
						font-weight: 400;
						font-size: 26rpx;
						color: #333333;
						line-height: 40rpx;
						margin-top: 6rpx;
					}
				}

				.n_price {
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					line-height: 34rpx;
					text-decoration: line-through;
					// margin-top: 6rpx;
					margin-left: 2rpx;
				}
			}
		}

		.style_2 {
			width: 100%;
			display: flex;
			// align-items: center;
			// padding: 26rpx 18rpx 28rpx 20rpx;
			box-sizing: border-box;
			background-color: #ffffff;
			border-radius: 20rpx;

			&>.image {
				width: 166rpx;
				height: 166rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
				}

				position: relative;

				.tag {
					position: absolute;
					right: 10rpx;
					bottom: 10rpx;
					width: 94rpx;
					height: 50rpx;
					background: rgba(0, 0, 0, 0.4);
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #ffffff;
					line-height: 50rpx;
					text-align: center;
				}
			}

			.info {
				width: calc(100% - var(--img-width));
				padding-left: 24rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.name {
					font-weight: bold;
					font-size: 30rpx;
					color: #333333;
					line-height: 42rpx;
				}

				.center-text {
					font-weight: bold;
					font-size: 24rpx;
					color: #999999;
					line-height: 34rpx;
				}

				.price_num {
					display: flex;
					align-items: flex-end;
					justify-content: space-between;
					margin-top: 26rpx;

					.left {
						display: flex;
						align-items: flex-end;

						.price {
							font-weight: bold;
							font-size: 44rpx;
							color: #ff2e2e;
							line-height: 40rpx;

							text {
								font-size: 32rpx;
							}
						}

						.n_price {
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
							line-height: 34rpx;
							text-decoration: line-through;
							margin-top: 6rpx;
							margin-left: 18rpx;
						}
					}

					.num {
						font-weight: 400;
						font-size: 20rpx;
						color: #333333;
						line-height: 40rpx;
						margin-top: 6rpx;
					}
				}
			}
		}
	}
</style>